<template>
  <div>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-header id="header" style="text-align: left">
        <span id="siteLogo"
          ><i class="el-icon-menu" @click="changeCollapseState"></i
        ></span>
        <span id="siteName" @click="toIndexPage"
          >基于微服务的电信产品订购与入库</span
        >

        <span id="otherInfo">
          <el-avatar id="userIcon" :size="30" :src="circleUrl"></el-avatar>

          <el-badge is-dot>
            <i class="el-icon-bell"></i>
          </el-badge>

          <el-dropdown class="userDropDown">
            <span class="el-dropdown-link">
              管理员
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout"
                >退出系统</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-header>

      <el-container>
        <el-aside :width="isCollapse === true ? '46px' : '150px'">
          <el-menu
            :collapse="isCollapse"
            :key="index"
            v-for="(item, index) in $router.options.routes"
            :default-openeds="['8', '9', '10', '11', '12']"
            router
          >
            <el-submenu
              @click.native="changeCurrentNavIndex(index)"
              v-if="!item.hidden && item.meta.role === getUserInfo().role"
              :index="index + ''"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span> {{ item.name }}</span>
              </template>

              <span :key="index" v-for="(subitem, index) in item.children">
                <el-menu-item
                  style="text-align: left"
                  :class="$route.path == subitem.path ? 'is-active' : ''"
                  :index="subitem.path"
                  v-if="!subitem.hidden"
                >
                  <i :class="subitem.icon"></i>
                  {{ subitem.name }}
                </el-menu-item>
              </span>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <my-component-adminbreadcrumb
            :currentNavIndex="currentNavIndex + ''"
          />

          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import AdminBreadcrumb from "../../components/admin/AdminBreadcrumb.vue";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-adminbreadcrumb": AdminBreadcrumb,
  },
  data() {
    return {
      isCollapse: false,
      circleUrl:
        "https://img-blog.csdnimg.cn/20210611194908305.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70",
      user: {},
      currentNavIndex: 8,
      circleSize: "400px",
      demoLineSize: "550px",
      inlineBlock: "inline-block",
      bottom: "150px",
    };
  },
  methods: {
    toIndexPage() {
      //改变页面导航信息
      if (this.$route.path !== "/adminIndex") {
        this.$router.push("/adminCustomer");
      }
    },
    // 注销
    logout() {
      sessionStorage.removeItem("userInfo");
      this.$router.push("/");
    },
    //改变菜单栏缩展状态
    changeCollapseState() {
      this.isCollapse = !this.isCollapse;
    },
    // 更改当前index 面包屑导航栏需要
    changeCurrentNavIndex(index) {
      this.currentNavIndex = index;
    },
  },
  mounted() {
    let user = this.getUserInfo();
    console.log(user);
    if (user.role === "管理员") {
      this.$router.push("/adminCustomer");
    } else {
      this.$router.push("/adminCheck");
    }
  },
};
</script>

<style>
/* 网页整体包括页眉、页眉元素位置的CSS */

#header {
  background-color: #409eff;
}
#logo {
  background-color: rebeccapurple;
}
h1 {
  color: white;
}
#siteLogo {
  font-size: 20px;
  color: white;
}
#header {
  display: flex;
  align-items: center;
}
#header > #siteName {
  font-size: 20px;
  color: white;
  margin-left: 20px;
}

.el-icon-menu,
#siteName {
  cursor: pointer;
}

.el-submenu .el-menu-item {
  min-width: 0px;
}

#userIcon,
.userDropDown {
  margin: -10px 11px;
}
.el-icon-bell {
  cursor: pointer;
}

#otherInfo {
  position: absolute;
  right: 20px;
}

.el-aside {
  border: 1px solid #ebebeb;
  /* background: #fafafa; */
}

.el-main {
  background: #fafafa;
}

.el-button {
  padding: 12px;
}

.el-dropdown-link {
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* 网页主体区域CSS */
#mainContent {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
}
.presentation {
  background-color: white;
  padding: 24px;
}

.btnUpdate,
.uploadDemo {
  margin-left: 80px;
}

div.el-tabs.el-tabs--top.el-tabs--border-card {
  margin-top: 10px;
}
</style>